<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer"/>
    <title>发布课程-[[${session.admin.name}]]的后台管理</title>
    <meta name="description" content="Free Bootstrap 4 Admin Theme | Pike Admin">
    <meta name="referrer" content="no-referrer"/>
    <!-- Favicon -->
    <link rel="shortcut icon" href="background/images/favicon.ico">
    <!-- Switchery css -->
    <link href="background/plugins/switchery/switchery.min.css" rel="stylesheet" />
    <!-- Bootstrap CSS -->
    <link href="background/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Font Awesome CSS -->
    <link href="background/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <!-- Custom CSS -->
    <link href="background/css/style.css" rel="stylesheet" type="text/css" />
    <!-- BEGIN CSS for this page -->
    <link rel="stylesheet" type="text/css" href="common/css/dataTables.bootstrap4.min.css"/>
    <link rel="stylesheet" href="background/EditorMD/lib/codemirror/codemirror.min.css">
    <link rel="stylesheet" href="background/EditorMD/css/editormd.css">
    <link rel="stylesheet" href="common/tagsinput/jquery-tagsinput.min.css">
    <style>
        .tag{
            color: white;
        }
    </style>
    <!-- END CSS for this page -->
</head>
<body class="adminbody">
<div id="main">
    <!-- top bar navigation -->
    <div th:replace="common/adminBar::#top"></div>
    <!-- End Navigation -->


    <!-- Left Sidebar -->
    <div th:replace="common/adminBar::#sidebar(currUri='courses')"></div>
    <!-- End Sidebar -->

    <div class="content-page">

        <!-- Start content -->
        <div class="content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-xl-12">
                        <div class="breadcrumb-holder">
                            <h1 class="main-title float-left">
                                <i class="fa fa-pencil bigfonts"></i> 开始你的创作 &ensp;
                            </h1>

                            <ol class="breadcrumb float-right">
                                <li class="breadcrumb-item">课程详情管理</li>
                                <li class="breadcrumb-item active">编辑课程</li>
                            </ol>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row">
                    <div class="col-xs-3 col-sm-3 col-md-3">
                        <div class="form-group row" style="padding: 0px 10px">
                            <img th:if="${course.imgUrl != null}" th:src="${course.imgUrl}" class="img-thumbnail" id="img_head" style="width: 100%;height:150px " alt="">
                            <img th:if="${course.imgUrl == null}" class="img-thumbnail" id="img_head" style="width: 100%;height:150px " alt="">
                        </div>
                    </div>
                    <div class="col-xs-8 col-sm-8 col-md-8" style="padding: 60px 0">
                        <input type="file" name="image" onchange="uploadImg()" id="img" accept="image/jpeg,image/jpg,image/png"><br>
                        <small class="text-danger">你可以上传此课程的封面</small>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input th:value="${course.title}" type="text" class="form-control col-sm-12" id="title" autocomplete="off" placeholder="请输入课程标题">
                            <input th:value="${course.id}" type="hidden" id="id">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <textarea th:if="${course.introduce != null}" th:text="${course.introduce}" class="form-control col-sm-12" id="info" maxlength="100" placeholder="摘要会在课程外进行显示，帮助读者快速了解内容"></textarea>
                            <textarea th:if="${course.introduce == null}" class="form-control col-sm-12" id="info" maxlength="100" placeholder="摘要会在课程外进行显示，帮助读者快速了解内容"></textarea>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input th:if="${course.courseUrl != null}" id="courseUrl" type="text" class="form-control col-sm-12" th:value="${course.courseUrl}" placeholder="请输课程路径"/>
                            <input th:if="${course.courseUrl == null}" id="courseUrl" type="text" class="form-control col-sm-12" placeholder="请输课程路径"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input type="number" th:if="${course.courseSections != null}" id="courseSections" class="form-control col-sm-12" th:value="${course.courseSections}" placeholder="请输课程节数"/>
                            <input type="number" th:if="${course.courseSections == null}" id="courseSections" class="form-control col-sm-12" placeholder="请输课程节数"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="form-group row" style="padding: 0px 10px">
                            <input type="text" th:if="${course.courseTime != null}" id="courseTime" class="form-control col-sm-12" th:value="${course.courseTime}" placeholder="请输入HH:MM格式的时间"/>
                            <input type="text" th:if="${course.courseTime == null}" id="courseTime" class="form-control col-sm-12" placeholder="请输入HH:MM:SS格式的时间"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <div class="card mb-3">
                            <div class="card-header">
                                <h3>编辑课程的信息</h3>
                            </div>

                            <div class="card-body">
                                <div class="form-group">
                                    <label class="col-form-label"><span style="font-weight: bold">课程类别</span>
                                        <small class="form-text text-muted text-danger">你需要将此课程添加到已有的课程类别中</small>
                                    </label>
                                    <select class="form-control" id="type" onchange="changeCourseType()">
                                        <option value="0">请选择课程类别</option>
                                        <option th:each="courseType:${courseTypes}" th:value="${courseType.id}" th:text="${courseType.title}"></option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label"><span style="font-weight: bold">课程阶段</span>
                                        <small class="form-text text-muted text-danger">你需要将此课程添加到已有的课程阶段中</small>
                                    </label>
                                    <select class="form-control" id="stage">
                                        <option value="0">请选择课程阶段</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label class="col-form-label"><span style="font-weight: bold">课程排序</span>
                                        <small class="form-text text-muted text-danger">你需要为此课程添加到课程排序</small>
                                    </label>
                                    <div class="form-group row" style="padding: 0px 10px">
                                        <input th:if="${course.sort != null}" type="number" class="form-control col-sm-12" id="sort" autocomplete="off" placeholder="请输入课程排序" th:value="${course.sort}">
                                        <input th:if="${course.sort == null}" type="number" class="form-control col-sm-12" id="sort" autocomplete="off" placeholder="请输入课程排序">
                                    </div>
                                </div>

                                <div class="form-group">
                                    当前课程状态：
                                    <span th:if="${course.status == 0}" style="font-color:text-danger">草稿</span>
                                    <span th:if="${course.status == 1}" style="font-color:text-danger">已发表</span>
                                    <span th:if="${course.status == 2}" style="font-color:text-danger">回收站</span>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button class="btn btn-success btn-sm" onclick="updatePublish()"><i class="fa fa-recycle"></i> 更新并发布</button>
                                <button class="btn btn-primary btn-sm" onclick="updateDraft()"><i class="fa fa-save"></i> 保存到草稿箱</button>
                            </div>


                        </div><!-- end card-->
                    </div>
                </div>
            </div>
            <!-- END container-fluid -->

        </div>
        <!-- END content -->

    </div>
    <!-- END content-page -->

    <div th:replace="common/adminBar::#footer"></div>

</div>
<!-- END main -->

<script src="background/js/modernizr.min.js"></script>
<script src="background/js/jquery.min.js"></script>
<script src="background/js/moment.min.js"></script>

<script src="background/js/popper.min.js"></script>
<script src="background/js/bootstrap.min.js"></script>

<script src="background/js/detect.js"></script>
<script src="background/js/fastclick.js"></script>
<script src="background/js/jquery.blockUI.js"></script>
<script src="background/js/jquery.nicescroll.js"></script>
<script src="background/js/jquery.scrollTo.min.js"></script>
<script src="background/plugins/switchery/switchery.min.js"></script>

<!-- App js -->
<script src="background/js/pikeadmin.js"></script>

<!-- BEGIN Java Script for this page -->
<!--引入MarkDown-->
<script type="text/javascript" src="background/EditorMD/editormd.amd.min.js"></script>
<script src="common/tagsinput/jquery.color.plus-names.min.js"></script>
<script src="common/tagsinput/jquery-tagsinput.min.js" defer></script>
<script src="common/js/course.js"></script>
<script src="common/js/sweetalert.min.js"></script>
<script src="common/js/common.js"></script>
<script>
    $(document).ready(function () {
        $('[data-role="tags-input"]').tagsInput();
    });
    function uploadImg() {
        let id = $('#id').val().trim();
        let formdata=new FormData();
        formdata.append("image",$("#img").get(0).files[0]);
        formdata.append("flag",6);
        formdata.append("id",id);
        $.ajax({
            async: false,
            type: "POST",
            url: "image/upload",
            dataType: "json",
            data: formdata,
            contentType:false,//ajax上传图片需要添加
            processData:false,//ajax上传图片需要添加
            success: function (data) {
                if (data['code']== 200){
                    $('#img_head').attr("src",data['data']);
                    swal("成功", "上传成功", "success");
                }else {
                    swal("错误", "服务器发生了一个错误", "error");
                }
            },
            error: function (e) {
            }
        });
    }
</script>
</body>
</html>